<template>
  <!-- 一审 -->
  <div v-if="isCheckFirst">
    <template v-for="(item, index) in param.priceList" :key="index">
      <el-row class="marginTop5">
        <el-col :span="7">
            <el-row justify="center">
              <el-col :span="4">箱贴单价</el-col>
              <el-col :span="8">
                <el-input-number v-model="item.price" :controls="false" :min="1" :max="99999" :precision="2" :disabled="isDisabled" @blur="item.price = item.price ? item.price : 1" style="width:100%">
                  <template #prefix> <span>$</span></template>
                </el-input-number>
              </el-col>
            </el-row>
        </el-col>

        <el-col :span="10">
            <el-row justify="center" gutter="20"> 
              <el-col :span="12" class="text-right">预还回调箱量</el-col>
              <el-col :span="12">
                <el-input-number v-model="item.number" :controls="false" :min="0" :max="1000" :disabled="isDisabled">
                  <template #suffix> <span>个</span></template>
                </el-input-number>
              </el-col>
            </el-row>
        </el-col>
        <el-col :offset="2" :span="2">
          <el-row justify="center">
            <el-col :span="24">
              <el-select v-if="item.id" v-model="item.returnCity" :disabled="isDisabled" placeholder="选择">
                  <el-option v-for="item in returnCityList" :label="item.cityName" :value="item.cityId" :key="item.cityId" />
              </el-select>
              <city-select v-else :selectCity="item.returnCity" :needInfo="true" @cityInfo="getReturnCity($event, item)" style="width: 100%;"></city-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="3">
          <el-row justify="start">
              <el-col :span="12" v-if="!isDisabled">
                <el-row>
                  <el-col :offset="1" :span="10" v-if="param.priceList.length > 1">
                    <el-button @click="handleDelete(index)" v-if="(item.number == 0 || [2].includes(rowData.status)) && [10, null].includes(rowData.currentNodeType)" icon="Delete" size="small" type="danger" circle plain></el-button>
                  </el-col>
                  <el-col :span="10" v-if="index == param.priceList.length - 1">
                    <el-button @click="handleAdd" icon="Plus" type="info" size="small" circle plain></el-button>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :offset="1" :span="23" v-else-if="!isAgent && [20].includes(rowData.status) && [5, 15, null].includes(rowData.currentNodeType) && !rowData.terminateSignflowId">
                <span v-if="index == param.priceList.length - 1">
                  <div style="width:100%;height: auto;">
                    <el-button @click="handleAdd" icon="Plus" type="info" size="small" circle plain></el-button>
                  </div>
                </span>
              </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
  </div>

  <!-- 二审 -->
  <div v-else>
    <template v-for="(item, index) in param.priceList" :key="index">
      <el-row class="marginTop5">
        <el-col :offset="1" :span="4">
            <el-row>
              <el-col :span="12" class="text-right">箱贴单价：</el-col>
              <el-col :span="12" class="text-left">
                <el-input-number v-model="item.price" :controls="false" :min="1" :max="99999" :precision="2"
                  :disabled="item.edit ? false : isDisabled" @blur="item.price = item.price ? item.price : 1" style="width:100%">
                  <template #prefix> <span>{{item.currency == "USD" ? "$" : "¥" }}</span> </template>
                </el-input-number>
              </el-col>
            </el-row>
        </el-col>
        <el-col :span="5">
            <el-row>
              <el-col :span="10" class="text-right">预还回调箱量：</el-col>
              <el-col :span="14" class="text-left">
                <el-input-number v-model="item.number" :controls="false" :min="0" :max="1000" :disabled="isDisabled">
                  <template #suffix> <span>个</span></template>
                </el-input-number>
              </el-col>
            </el-row>
        </el-col>
        <el-col :span="5">
            <el-row>
              <el-col :span="10" class="text-right">实还回调箱量：</el-col>
              <el-col :span="14" class="text-left">
                <el-input-number v-model="item.realReturnBoxQuantity" :controls="false" :min="0" :max="1000" :disabled="isDisabled">
                  <template #suffix> <span>个</span></template>
                </el-input-number>
              </el-col>
            </el-row>
        </el-col>
        <el-col :span="4">
            <el-row>
              <el-col :span="12" class="text-right">实还箱贴小计：</el-col>
              <el-col :span="12" class="text-left">{{item.currency == "USD" ? "$" : "¥" }} {{(item.price * item.realReturnBoxQuantity)}}</el-col>
            </el-row>
        </el-col>
        <el-col :span="2">
          <el-select v-if="item.id" v-model="item.returnCity" :disabled="isDisabled" placeholder="选择">
              <el-option v-for="(item1,index1) in returnCityList" :label="item1.cityName" :value="item1.cityId" :key="index1" />
          </el-select>
          <city-select v-else :selectCity="item.returnCity" :needInfo="true" @cityInfo="getReturnCity($event, item)"
            style="width: 100%;"></city-select>
        </el-col>
        <el-col :span="3">
            <template v-if="!isAgent && ['agentReject2', 'agentReject', 'boxOwnerSure', 'boxOwnerReviewReject', 'agentReviewReject', 'agentReviewReject2', 'boxOwnerReviewReject2'].includes(pageState)">
              <el-row align="middle">
                <el-col :offset="1" :span="4" v-if="param.priceList.length > 1 && (item.number == 0 && !item.id)">
                    <el-button @click="handleDelete(index)" icon="Delete" size="small" type="danger" circle plain></el-button>
                </el-col>
                <el-col :offset="1" :span="4"  v-if="(index == param.priceList.length - 1)">
                    <el-button @click="handleAdd" icon="Plus" type="info" size="small" circle plain></el-button>
                </el-col>
              </el-row>
            </template>
            
            <template v-else-if="!isAgent && [20].includes(rowData.status) && [5, 15, null].includes(rowData.currentNodeType) && !rowData.terminateSignflowId">
              <el-row align="middle">
                <el-col :offset="1" :span="4" v-if="index == param.priceList.length - 1">
                    <el-button @click="handleAdd" icon="Plus" type="info" size="small" circle plain></el-button>
                </el-col>
              </el-row>
            </template>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
<script setup lang="ts">
import citySelect from '@/components/citySelect'
import { number } from 'echarts';
import { off } from 'process';
import { computed, onMounted, reactive, ref, watch } from 'vue';
const emit = defineEmits(['priceListChange'])
const props = defineProps({
  isDisabled: {
    type: Boolean,
    default: false
  },
  isAgent: {
    type: Boolean,
    default: false
  },
  returnCityList: {
    type: Array,
    default: () => []
  },
  priceList: {
    type: Array,
    default: () => []
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  pageState: {
    type: String,
    default: ''
  }

})

const param = reactive({
  priceList: props.priceList,
  cityId: '',
  cityName: ''
})
onMounted(() => {
  param.priceList = props.priceList || []
})
watch(() => props.priceList, (newVal, oldVal) => {
  param.priceList = props.priceList || []
})
const isCheckFirst = computed((item: any) => {
  const status = props.rowData.status
  return status < 15 || status == 40
})

// 城市id回写
const getReturnCity = (info: any, item: any) => {
  item.returnCity = info.id
  item.returnCityName = info.cityCName
  item.returnCountry = info.countryId
  item.returnCountryName = info.countryCName
}

//增删改
const handleAdd = () => {
  const priceItem = { id: null, number: 0, price: 1, xiaoJi: 0,realReturnBoxQuantity:0, edit: true }
  param.priceList.push(priceItem)
  emit('priceListChange', param.priceList)
}
const handleDelete = (index: any) => {
  param.priceList.splice(index, 1)
  console.log('handleDelete',param.priceList)
  emit('priceListChange', param.priceList)
}

// 计算总价
const totalMoney = ref(0)
const computedPrice = computed(() => {
  emit('priceListChange', param.priceList)
  let arry = param.priceList
  totalMoney.value = 0
  arry.forEach((el) => {
    if (el.number >= 0 && el.price >= 0) {
      el.xiaoJi = el.number * el.price
      totalMoney.value = totalMoney.value - 0 + el.xiaoJi
    }
  })
  return arry
})

</script>

<style scoped>
/* .el-form--inline .el-form-item {
  margin-right: 8px;
} */
</style>
